<template>
	<view class="editor_container">
		<view class="editor-wrapper">
			<editor id="editor" @input="getEditorContent" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
		</view>
		<view class="addmenu" v-if="isclickadd">
			<view class="addimage" @click="insertImage">Insert picture</view>
		</view>
		<view class="editor_add" :class="isclickadd?'editor_hover':'editor_click'">
			<view class="editor_add_icon" @click="addClick"></view>
		</view>
		<view class="block138"></view>
		<view class="clickbuildbtn">
			<!-- <view class="tips">描述</view> -->
			<view class="text1" @click="submitForm">OK</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		uploadFileUrl: {
			type: String,
			default: "",
		},
        article:{
            type:String,
            default: "",
        }
	},
	data() {
		return {
			readOnly: false,
			formats: {},
			placeholder:"Please input the content~",
			contentVal: '', //内容（带html）
			contentText: '', //内容（纯文本）
			isclickadd:true,//点击展开
		};
	},
	mounted() {
        this.contentVal = this.article
		// console.log("1213568",this.contentVal)
    },
	methods: {
		addClick(){
			var isclickadd = this.isclickadd
			this.isclickadd = !isclickadd
		},
		//确认
		submitForm(){
			// console.log(this.contentVal)
			// uni.showModal({
			// 	title:'富文本内容',
			// 	content:this.contentVal
			// })
			// console.log(this.contentText)
            this.$emit("confirmHandle",this.contentVal)
		},
		//获取编辑器内容，当前页面都能获取到
		getEditorContent(e) {
		    this.contentVal = e.detail.html;
		    this.contentText = e.detail.text;
		},
		readOnlyChange() {
			this.readOnly = !this.readOnly
		},
		onEditorReady() {
			var _this = this
			// console.log(uni.createSelectorQuery().in(this).select('#editor'))
			uni.createSelectorQuery().in(this).select('#editor').context((res) => {
				// console.log("1213",_this.contentVal)
				setTimeout(function(){
					var contentVal_1 = _this.contentVal;
					_this.editorCtx = res.context
					let EContent = {
					    html: contentVal_1
					}
					_this.editorCtx.setContents(EContent); //设置富文本编辑器的内容
				},500)
			}).exec()
		},
		undo() {
			this.editorCtx.undo()
		},
		redo() {
			this.editorCtx.redo()
		},
		format(e) {
			let {
				name,
				value
			} = e.target.dataset
			if (!name) return
			// console.log('format', name, value)
			this.editorCtx.format(name, value)
		},
		onStatusChange(e) {
			const formats = e.detail
			this.formats = formats
		},
		insertDivider() {
			this.editorCtx.insertDivider({
				success: function() {
					console.log('insert divider success')
				}
			})
		},
		clear() {
			this.editorCtx.clear({
				success: function(res) {
					console.log("clear success")
				}
			})
		},
		removeFormat() {
			this.editorCtx.removeFormat()
		},
		insertDate() {
			const date = new Date()
			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
			this.editorCtx.insertText({
				text: formatDate
			})
		},
        //插入图片
		insertImage() {
			var _this = this
			uni.chooseImage({
				count: 1,
				success: async (res) => {
					var ress = await _this.uploadfile(res.tempFilePaths[0])
					if(ress&&ress.code==200){
						_this.editorCtx.insertImage({
							src: ress.data,
							alt: 'image',
							width: '100%',
							height:'100%',
							success: function() {
								console.log('insert image success')
                                _this.$cache.showLoadingToast("")
							}
						})
					}
				}
			})
		},
		//调取图片文件上传
		uploadfile(tempFilePath){
			var _this = this
			var header = {}
			// header['content-type'] = 'multipart/form-data'
			header['Authorization'] = uni.getStorageSync('token')
			return new Promise((resolve, reject) => {
				uni.showLoading({
					title: 'Loading...',
					mask: true
				});
				uni.uploadFile({
				    url: _this.uploadFileUrl, //仅为示例，非真实的接口地址
				    filePath: tempFilePath,
				    name: 'file',
					header: header,
					methods:"POST",
				    // formData: {
				    //     'user': 'test'
				    // },
				    success: (ress) => {
						uni.hideLoading()
						var res = JSON.parse(ress.data)
				        // console.log(ress.data);
						resolve(res)
				    },
					fail: (failres) => {
						reject(failres)
					}
				});
			})
		},
		
	}
};
</script>

<style lang="scss" scoped>
.editor_container{
	width: 100%;
	height: 100%;
	border-top: 1rpx solid #f0f0f0;
}
.editor-wrapper {
	width: 100%;
	background: #F8F8F8;
	.ql-container{
		padding: 32rpx;
		height: calc(100vh - 88px);
	}
}
.clickbuildbtn {
	width: 100%;
	padding: 20rpx 0;
	background-color: #ffffff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	.tips {
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #272727;
		padding-bottom: 20rpx;
	}
	.text1 {
		width: 700rpx;
		height: 85rpx;
		background-color: #303030;
		color: #ffffff;
		font-size: 28rpx;
		line-height: 85rpx;
		text-align: center;
	}
}
.editor_add{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	background-color: #FFFFFF;
	position: fixed;
	right: 32rpx;
	bottom: 200rpx;
	z-index: 18;
	.editor_add_icon{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
}
.editor_click{
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:-webkit-transform .2s linear;
	transition:transform .2s linear;
}
.editor_hover{
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
	-webkit-transition:-webkit-transform .2s linear;
	transition:transform .2s linear;
}
.addmenu{
	width: 298rpx;
	position: fixed;
	right: 32rpx;
	bottom: 318rpx;
	z-index: 18;
	.addimage{
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		background-color: #555555;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		border-radius: 88rpx;
	}
}
</style>
